<template>
    <statusBar :bgc="bgc"></statusBar>
    <view class="navigator" :style="{ backgroundColor: bgc, height: height * 2 + 'rpx' }">
        <view class="back" v-if="isBack" @click="back">
            <image src="/static/common/icon_back.png" mode="widthFix" />
        </view>

        <view class="title">
            {{ title }}
        </view>
        <view class="right">
            <slot name="right"></slot>
        </view>
    </view>
</template>

<script setup lang="ts">
import statusBar from '@/components/statusBar/statusBar.vue';
import { defineOptions, DefineProps, withDefaults } from 'vue';

defineOptions({
    name: 'customNavigationBar'
});

const props = withDefaults(
    defineProps<{
        isBack?: boolean;
        bgc?: string;
        height?: number;
        title?: string;
        backUrl?: string;
    }>(),
    {
        isBack: true,
        bgc: '#fff',
        height: 44,
        title: '',
        backUrl: ''
    }
);

const back = () => {
    if (props.backUrl) {
        uni.reLaunch({
            url: props.backUrl
        });
    } else {
        uni.navigateBack();
    }
};
</script>

<style lang="scss" scoped>
.navigator {
    position: sticky;
    top: var(--status-bar-height);
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24rpx;
    // box-shadow: 0 8rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);

    .back {
        width: 32rpx;
        height: 32rpx;
        display: flex;
        align-items: center;

        image {
            width: 32rpx;
        }
    }
    .title {
        font-size: 36rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }
}
</style>
